<template>
  <div id="app">
    <div class="container">
      <h2>移动端部门和人员选择组件示例</h2>
      
      <div class="demo-section">
        <h3>部门选择（单选）</h3>
        <DepartmentSelect 
          v-model="selectedDepartment" 
          :limit="1" 
          placeholder="请选择部门"
        />
        <div class="result">选中部门：{{ selectedDepartment ? selectedDepartment.name : '无' }}</div>
      </div>
      
      <div class="demo-section">
        <h3>部门选择（多选）</h3>
        <DepartmentSelect 
          v-model="selectedDepartments" 
          :limit="0" 
          placeholder="请选择部门"
        />
        <div class="result">
          选中部门：
          <span v-if="selectedDepartments.length === 0">无</span>
          <span v-else>
            {{ selectedDepartments.map(dept => dept.name).join(', ') }}
          </span>
        </div>
      </div>
      
      <div class="demo-section">
        <h3>人员选择（单选）</h3>
        <UserSelect 
          v-model="selectedUser" 
          :departments="departments"
          :users="users"
          :limit="1"
          placeholder="请选择人员"
        />
        <div class="result">选中人员：{{ selectedUser ? selectedUser.name : '无' }}</div>
      </div>
      
      <div class="demo-section">
        <h3>人员选择（多选）</h3>
        <UserSelect 
          v-model="selectedUsers" 
          :limit="0" 
          :departments="departments"
          :users="users"
          placeholder="请选择人员"
        />
        <div class="result">
          选中人员：
          <span v-if="selectedUsers.length === 0">无</span>
          <span v-else>
            {{ selectedUsers.map(user => user.name).join(', ') }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DepartmentSelect from './components/DepartmentSelect.vue'
import UserSelect from './components/UserSelect.vue'

// 部门选择相关
const selectedDepartment = ref(null)
const selectedDepartments = ref([])

// 人员选择相关
const selectedUser = ref(null)
const selectedUsers = ref([])

// 部门数据
const departments = ref([
  {
    id: 1,
    name: '管理部门',
    userCount: 2
  },
  {
    id: 2,
    name: '技术部门',
    userCount: 3
  },
  {
    id: 3,
    name: '销售部门',
    userCount: 3
  }
])

// 用户数据
const users = ref([
  {
    id: 1,
    name: '张三',
    department: '管理部门',
    deptId: 1,
    avatar: ''
  },
  {
    id: 2,
    name: '李四',
    department: '管理部门',
    deptId: 1,
    avatar: ''
  },
  {
    id: 3,
    name: '王五',
    department: '技术部门',
    deptId: 2,
    avatar: ''
  },
  {
    id: 4,
    name: '赵六',
    department: '技术部门',
    deptId: 2,
    avatar: ''
  },
  {
    id: 5,
    name: '钱七',
    department: '销售部门',
    deptId: 3,
    avatar: ''
  },
  {
    id: 6,
    name: '孙八',
    department: '销售部门',
    deptId: 3,
    avatar: ''
  },
  {
    id: 7,
    name: '周九',
    department: '技术部门',
    deptId: 2,
    avatar: ''
  },
  {
    id: 8,
    name: '吴十',
    department: '销售部门',
    deptId: 3,
    avatar: ''
  }
])
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.demo-section h3 {
  margin-top: 0;
  color: #333;
}

.result {
  margin-top: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
}
</style>